Day15— JavaScript 箭頭函式 Arrow Function

2024 iThome 鐵人賽

DAY 9

佛心分享-IT 人自學之術

JavaScript自學分享系列第 15 篇

16th鐵人賽

姐姐恩

2024-09-26 23:54:02

51 瀏覽

分享至

大家好～我是姐姐恩！身為資訊小白的我，起初對於參賽主題非常苦惱，最後決定利用此次機會，延續學校的課(Java)，了解網頁前端三劍客之一的JavaScript！
所以接下來30天，我將在這裡紀錄我當天的學習筆記及統整後的學習內容，請大家多多指教！
＊學習內容主要取自MDN Web Docs及彭彭老師的YT課程。

JavaScript 箭頭函式 Arrow Function

JavaScript 箭頭函式:省去function關鍵字，以「=>」替代，但函式的內容、參數、回傳值並無變化。(函式本體「只有回傳值」時，可以簡化，下面詳細說明)

程式碼練習&註解筆記:

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta charset="utf-8" />
        <title>箭頭函式</title>
    </head>
    <body>
        <script>
            //計算1+2+...+9+10 的結果。
            // function calculate(max){ //新增參數 max。
            //     let result = 0;
            //     let n = 1;
            //     while(n<=max){
            //     result+=n;
            //     n++;
            //     }
            //     return result; //把結果傳遞到程式外部，可以從外部接收結果。
            // }

            //使用箭頭函式。(此種為無法簡化的箭頭函式)
            let calculate = (max)=>{
                let result = 0;
                let n = 1;
                while(n<=max){
                result+=n;
                n++;
                }
                return result; 
            };

            //呼叫函式。
            let ans1 = calculate(10); //1+...+10。
            let ans2 = calculate(20); //1+...+20。
            console.log(ans1, ans2);

            //箭頭函式簡化方法。(原)
            // let multify =(n1,n2)=>{
            //     return n1*n2;
            // };

            //簡化後。
            let multify =(n1,n2)=>(n1*n2); //箭頭後放小括號，裡面放回傳值。

            let answer = multify(3,4); 
            console.log(answer);
        </script>
    </body>
</html>

結論: 使用箭頭函式簡化function的應用，並不影響含是本體及內容，只是使程式的撰寫上更便利。

學習資源:
JavaScript 箭頭函式 Arrow Function - Front End 網頁前端工程教學